<template>
  <div :class="classes">
    <div :class="barConClasses">
      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Trigger',
  props: {
    mode: String
  },
  data() {
    return {
      prefix: 'cy-split-trigger',
      initOffset: 0
    }
  },
  computed: {
    isVertical() {
      return this.mode === 'vertical'
    },
    classes() {
      return [
        this.prefix,
        this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
      ]
    },
    barConClasses() {
      return [
        `${this.prefix}-bar-con`,
        this.isVertical ? 'vertical' : 'horizontal'
      ]
    }
  }
}
</script>
<style lang="scss">

.cy-split{
    
  
    &-trigger {
        border: 1px solid  var(--el-border-color);
        &-con {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        &-bar-con {
            position: absolute;
            overflow: hidden;
            &.vertical {
                left:2px;
                top: 50%;
                height: 8px;
                transform: translate(0, -50%);
            }
            &.horizontal {
                left: 50%;
                top: 2px;
                width: 8px;
                transform: translate(-50%, 0);
            }
        }
        &-vertical {
            width:6px;
            height: 100%;
            background:#f8f8f9;
            border-top: none;
            border-bottom: none;
            cursor: col-resize;
            .cy-split-trigger-bar {
                width: 4px;
                height: 1px;
                background: rgba(23, 35, 61, 0.25);
                float: left;
                margin-top:3px;
            }
        }
        &-horizontal {
            height: 6px;
            width: 100%;
            background: #f8f8f9;
            border-left: none;
            border-right: none;
            cursor: row-resize;
            .cy-split-trigger-bar {
                height:4px;
                width: 1px;
                background: rgba(23, 35, 61, 0.25);
                float: left;
                margin-right:3px;
            }
        }
    }
    &-horizontal {
        > .cy-split-trigger-con {
            top: 50%;
            height: 100%;
            width: 0;
        }
    }
    &-vertical {
        > .cy-split-trigger-con {
            left: 50%;
            height: 0;
            width: 100%;
        }
    }
    .no-select {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

</style>
